import React from 'react';
import TweenOne from 'rc-tween-one';
import './progress.scss';

export default class Progress extends React.Component {
    static defaultProps = {
        duration: 1000
    };
    constructor() {
        super()
        this.state = {
            paused: true,
            moment: null
        }
    }
    start = () => {
        this.setState({ paused: false })
        setTimeout(() => {
            this.setState({ paused: true, moment: 0 }, () => {
                if (this.props.onEnd) {
                    this.props.onEnd();
                }
            })
        }, this.props.duration)
    }
    render() {
        let { paused, moment } = this.state;
        let { duration, title } = this.props;
        return <div className="progress" onClick={this.start}>
            <div className="progress-content">{this.props.children}</div>
            <TweenOne animation={{ width: '100%', duration: duration, ease: 'linear' }} style={{ width: '0%' }} paused={paused} moment={moment} className="pb-bar" />
        </div>
    }
}
